<template>
  <!-- 委托租售 -->
  <div class="box commissionRental">
    <heads></heads>
    <titlesearch></titlesearch>
    <div class="gerenBox">
      <ceList :index="26"></ceList>
      <div class="houselist">
        <div
          class="title"
          style="padding:0 35px 12px 35px; display: flex;justify-content: space-between;align-items: center;position: relative;    border-bottom: 10px solid #f2f2f2;"
        >
          <span></span>
          <span>{{
            pageStatus == "add"
              ? "委托租售"
              : user.businessType == 1
              ? "委托房源"
              : user.businessType == 2
              ? "委托车源"
              : "委托记录"
          }}</span>
          <div>
            <div
              class="addweituo"
              @click.stop="newAdd"
              v-if="user.id && user.isAgent == '0'"
            >
              {{ pageStatus == "add" ? "委托记录" : "新增委托" }}
            </div>
          </div>
        </div>
        <template v-if="pageStatus == 'view'">
          <div style="height:30px"></div>
          <template v-if="user.id && user.isAgent == '0'">
            <bbczPrimaryItem
              :list="Recommend"
              @refresh="entrustedRecord()"
            ></bbczPrimaryItem>
          </template>
          <template v-else>
            <bbczPrimaryItem2
              :list="Recommend"
              @refresh="getAllDelegationSale()"
              v-if="RecommendCount != 0"
            ></bbczPrimaryItem2>
          </template>
          <div v-if="RecommendCount == 0" style="height: 450px">
            <el-empty description="还没有委托记录呢"></el-empty>
          </div>
          <div class="fenye" style="margin-top:12px;">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="RecommendCount"
              :current-page="collectPage.pageNo"
              :page-size="collectPage.pageSize"
              @current-change="CollectCurrentChange"
            ></el-pagination>
          </div>
        </template>
        <template v-if="pageStatus == 'add'">
          <div class="messageTab">
            <div
              class="messageTab_item"
              @click="messageTabClick(1)"
              :class="messageTab == 1 ? 'messageTab_active' : ''"
            >
              委托卖房
            </div>
            <div
              class="messageTab_item"
              @click="messageTabClick(2)"
              :class="messageTab == 2 ? 'messageTab_active' : ''"
            >
              委托出租房
            </div>
            <div
              class="messageTab_item"
              @click="messageTabClick(3)"
              :class="messageTab == 3 ? 'messageTab_active' : ''"
            >
              委托卖车
            </div>
          </div>
          <div class="list">
            <div class="li" v-if="messageTab != 3">
              <div class="left">
                {{ messageTab % 2 == 1 ? "我要出售" : "我要出租" }}
              </div>
              <div class="right">
                <el-select
                  id="el-select"
                  v-model="xuan"
                  placeholder="请选择委托房源类型"
                >
                  <el-option
                    :label="item.valueName"
                    :value="item.id"
                    v-for="(item, index) in selectType"
                    :key="item.id"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="li">
              <div class="left">
                {{ messageTab == 3 ? "看车地点" : "看房地点" }}
              </div>
              <div class="right">
                <el-input
                  id="input__inner"
                  v-model="shopAddress"
                  v-if="shopAddress"
                >
                  <el-button
                    slot="append"
                    icon="el-icon-location"
                    @click="addressopen"
                  ></el-button>
                </el-input>
                <el-input
                  id="input__inner"
                  v-model="shopAddress"
                  disabled
                  v-else
                  placeholder="请选择定位获取地址"
                >
                  <el-button
                    slot="append"
                    icon="el-icon-location"
                    @click="addressopen"
                  ></el-button>
                </el-input>
              </div>
            </div>
            <div class="li">
              <div class="left">联系方式</div>
              <div class="right">
                <input
                  v-model="contactInformation"
                  type="number"
                  oninput="if(value.length>11)value=value.slice(0,11)"
                  placeholder="请填写联系方式"
                />
              </div>
            </div>
            <div class="li" style="display:flex;align-items: flex-start;">
              <div class="left">备注</div>
              <div class="right">
                <el-input
                  class="commission-textarea"
                  type="textarea"
                  :placeholder="
                    messageTab != 3 ? '请详细介绍房源' : '请详细介绍车况'
                  "
                  maxlength="300"
                  show-word-limit
                  v-model="remarks"
                >
                </el-input>
              </div>
            </div>
          </div>
          <div class="reminder">
            {{ setDisclaimerContent }}
            <!-- 点击“一键委托”，将会有平台上的经纪人和您取得联系，并对您的房源进行核实，核实无误后将与您建立服务关系。帮帮同城仅提供信息展示平台和网络技术服务。 -->
          </div>
          <div class="xieyi">
            <el-checkbox v-model="xieyistate"></el-checkbox>
            <p>
              发布即默认同意
              <span style="color: #64b6a8;cursor: pointer;" @click="toXieyi(3)"
                >《帮帮同城用户协议》</span
              >
              <span style="color: #64b6a8;cursor: pointer;" @click="toXieyi(2)"
                >《帮帮同城隐私政策》</span
              >
            </p>
          </div>
          <div class="tijiao" @click="sub">一键委托</div>
        </template>
      </div>
    </div>
    <addressMap ref="addmap" @address="onaddress"></addressMap>
    <floor></floor>
  </div>
</template>
<script>
import bbczPrimaryItem from "../../index/comp/bbcz-primary-item.vue";
import bbczPrimaryItem2 from "../../index/comp/bbcz-primary-item2.vue";
import floor from "../../../components/floor";
import heads from "../../../components/head";
import ceList from "../../../components/ceList.vue";
import titlesearch from "../../../components/titlesearch.vue";
import addressMap from "../../../components/addressMap.vue";
export default {
  computed:{
    setDisclaimerContent(){
      this.messageTab;
      console.log(this.messageTab);
      const str = this.messageTab == 3 ? '车源' : ''
      if (this.messageTab == 3) {
        return this.disclaimerContent.replace(/房源/g,'车源');
      } else {
        return this.disclaimerContent;
      }
    }
  },
  components: {
    floor,
    heads,
    ceList,
    titlesearch,
    addressMap,
    bbczPrimaryItem,
    bbczPrimaryItem2
  },
  data() {
    return {
      pageStatus: "view",
      contactInformation: "",
      messageTab: 1,
      shopAddress: "",
      latitude: "",
      longitude: "",
      xieyistate: false,
      user: {},
      Recommend: [],
      RecommendCount: 0,
      selectType: [
        { id: 1, valueName: "住宅" },
        { id: 2, valueName: "商铺" },
        { id: 3, valueName: "写字楼" },
        { id: 4, valueName: "厂房" },
        { id: 5, valueName: "土地" },
        { id: 6, valueName: "车位" }
      ],
      remarks: "",
      xuan: "",
      collectPage: {
        pageNo: 1,
        pageSize: 10
      }
    };
  },
  created() {
    this.getUser();
    if (this.$route.query.type && this.$route.query.type == "add") {
      this.pageStatus = "add";
      this.messageTab = this.$route.query.index;
    }

    this.getDisclaimers(2);
  },
  methods: {
    CollectCurrentChange(e) {
      this.collectPage.pageNo = e;
      if (this.user.businessType && this.user.businessType != "0") {
        // 经纪人
        this.getAllDelegationSale();
      } else {
        //普通人
        this.entrustedRecord();
      }
    },
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.user = user;
        if (this.user.businessType && this.user.businessType != "0") {
          // 经纪人
          this.getAllDelegationSale();
        } else {
          //普通人
          this.entrustedRecord();
        }
      } else {
        this.loginstate = false;
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000
        });
        this.$router.push("/");
      }
    },
    newAdd() {
      if (this.pageStatus == "view") {
        // 新增
        this.pageStatus = "add";
      } else {
        // 浏览
        this.pageStatus = "view";
        this.entrustedRecord();
      }

      this.contactInformation = "";
      this.shopAddress = "";
      this.latitude = "";
      this.longitude = "";
      this.xieyistate = false;
      this.remarks = "";
      this.xuan = "";
    },
    // 获取委托记录
    entrustedRecord() {
      console.log("user", this.user);
      this.$getHttp("/api/mobile/public/getMyDelegationSale", {
        userId: this.user.id,
        ...this.collectPage
      }).then(res => {
        if (res.code == 200) {
          this.Recommend = res.delegationSale.pageList;
          this.RecommendCount = res.delegationSale.pageCount;
        }
      });
    },
    getAllDelegationSale() {
      this.$getHttp("/api/mobile/public/getAllDelegationSale", {
        businessType: this.user.businessType,
        ...this.collectPage
      }).then(res => {
        if (res.code == 200) {
          this.Recommend = res.delegationSale.pageList;
          this.RecommendCount = res.delegationSale.pageCount;
        }
      });
    },
    messageTabClick(index) {
      this.messageTab = index;
      this.xuan = "";
      this.shopAddress = "";
      this.latitude = "";
      this.longitude = "";
      this.position = "";
      this.contactInformation = "";
      this.remarks = "";
    },
    addressopen() {
      this.$refs.addmap.open();
    },
    onaddress(item) {
      this.latitude = item.location.lat;
      this.longitude = item.location.lng;
      this.shopAddress = item.address;
    },
    sub() {
      //         clientId: 946
      // businessType: 2
      // delegationType:
      // position: 湖北省武汉市洪山区珞狮路特1号
      // longitude: 114.347028
      // latitude: 30.501235
      // contactInformation: 11111111111
      // remarks:

      // console.log({
      //     latitude:this.latitude,
      //     longitude:this.longitude,
      //     position:this.shopAddress,
      //     contactInformation:this.contactInformation,
      //     remarks:this.remarks,
      //     clientId:this.user.id,
      //     delegationType:this.xuan,
      //     businessType:this.messageTab==3?"2":'1',

      // });
      if (!this.xieyistate) {
        this.myErrorMessage("请同意协议");
        return;
      }
      if (!this.shopAddress) {
        this.myErrorMessage(
          this.messageTab == 3 ? "请选择车源地址" : "请选择房源位置"
        );
        return;
      }
      if (!this.contactInformation) {
        this.myErrorMessage("请填写联系电话");
        return;
      }
      if (this.contactInformation.length != 11) {
        this.myErrorMessage("请输入正确格式的电话号码");
        return;
      }
      let data = {
        latitude: this.latitude,
        longitude: this.longitude,
        position: this.shopAddress,
        contactInformation: this.contactInformation,
        remarks: this.remarks,
        clientId: this.user.id,
        delegationType: this.xuan,
        businessType: this.messageTab == 3 ? "2" : "1",
        entrustedContent:
          this.messageTab == 1
            ? "委托卖房"
            : this.messageTab == 2
            ? "委托租房"
            : "委托卖车"
      };
      // return
      this.$postHttp("/api/mobile/public/publishDelegation", data).then(res => {
        if (res.code == 200) {
          this.mySuccessMessage(res.msg);
          window.scrollTo(0, 0);
          this.newAdd();
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.commission-textarea {
  /deep/textarea {
    height: 200px;
    padding-bottom: 20px;
  }
}
.addweituo {
  font-size: 18px;
  font-weight: 400;
  color: #64b6a8;
  right: 55px;
  width: 120px;
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  text-align: center;
  cursor: pointer;
}
.houselist {
  width: 936px;
  min-height: 820px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  vertical-align: top;
  display: inline-block;
  .title {
    text-align: center;
    font-size: 26px;
    font-weight: 600;
    color: #000;
    margin-top: 20px;
  }
  .messageTab {
    height: 120px;
    display: flex;
    align-items: center;
    margin-left: 55px;
    .messageTab_item {
      width: 150px;
      height: 50px;
      font-size: 20px;
      font-weight: 600;
      color: #666666;
      margin-right: 20px;
      display: flex;
      align-items: center;
      cursor: pointer;
    }
    .messageTab_active {
      font-size: 24px;
      font-weight: 600;
      color: #64b6a8;
    }
  }
  .list {
    margin-left: 55px;
    width: 80%;
    color: #000;
    .li {
      border-bottom: 1px solid #d0d0d0;
      padding-bottom: 16px;
      margin-top: 20px;
      .left {
        display: inline-block;
        width: 140px;
        font-size: 20px;
        font-weight: 600;
        margin-right: 5px;
        span {
          color: red;
        }
      }
      .right {
        display: inline-block;
        width: 550px;
        input {
          width: 99%;
          font-size: 20px;
          background-color: #fff;
          cursor: pointer;
        }
        .el-select {
          width: 99%;
          /deep/.el-input__inner {
            border: 0;
            padding: 0;
            font-size: 20px;
          }
        }
        /deep/.el-radio__label {
          font-size: 18px;
        }
        /deep/.el-radio__inner {
          width: 28px;
          height: 28px;
        }
        /deep/.el-radio__input.is-checked .el-radio__inner {
          background-color: #64b6a8;
          border-color: #64b6a8;
        }
        /deep/.el-radio__inner::after {
          box-sizing: content-box;
          content: "";
          border: 2px solid #fff;
          position: absolute;
          transform: rotate(45deg) scaleY(1);
          transition: transform 0.15s ease-in 0.05s;
          transform-origin: center;
          border-radius: 0;
          background-color: rgba(0, 0, 0, 0);
          width: 6px;
          height: 13px;
          left: 9px;
          top: 4px;
          border-left: 0;
          border-top: 0;
        }
        /deep/.el-radio__input.is-checked + .el-radio__label {
          color: #333;
        }
      }
      .tu {
        position: relative;
        margin-top: 24px;
        width: 100%;
        font-size: 18px;
        .el-textarea {
          font-size: 18px;
        }
        .textarea {
          /deep/.el-textarea__inner {
            width: 698px;
            min-height: 80px !important;
            line-height: 25px;
            outline: none;
            padding: 10px 13px 30px 13px;
            overflow-y: visible;
          }
        }
        .zi {
          position: absolute;
          font-size: 14px;
          z-index: 99;
          right: 10px;
          bottom: 10px;
          color: #999999;
        }
        .shuoming {
          position: absolute;
          top: 0px;
          left: 180px;
          width: 308px;
          font-size: 18px;
          color: #999999;
          display: inline-block;
        }
      }
      .tu1 {
        position: relative;
        .sfz {
          width: 683px;
          height: 242px;
          top: 0px;
          left: 0px;
        }
        /deep/.el-upload--picture-card {
          width: 683px;
          height: 242px;
        }
      }
    }
  }
  .reminder {
    margin: auto;
    margin-top: 26px;
    text-align: left;
    font-size: 12px;
    font-weight: 400;
    color: #999999;
    width: 42%;
  }
  .xieyi {
    width: 550px;
    color: #333;
    margin: 0 auto;
    margin-top: 140px;
    margin-bottom: 25px;
    /deep/.el-checkbox__inner {
      width: 28px;
      height: 28px;
      border-radius: 50%;
    }
    /deep/.el-checkbox__inner::after {
      border: 2px solid #fff;
      width: 6px;
      height: 13px;
      left: 9px;
      top: 4px;
      border-left: 0;
      border-top: 0;
    }
    /deep/.el-checkbox__input.is-checked .el-checkbox__inner,
    /deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: #64b6a8;
      border-color: #64b6a8;
    }
    p {
      width: 450px;
      display: inline-block;
    }
  }
  .tijiao {
    width: 300px;
    height: 60px;
    background: #64b6a8;
    border-radius: 6px;
    text-align: center;
    line-height: 60px;
    margin: 0 auto;
    font-size: 24px;
    margin-bottom: 50px;
    cursor: pointer;
    color: #fff;
  }
}
.box {
  position: relative;
  padding-bottom: 200px;
}
.gerenBox {
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 32px;
  margin-bottom: 45px;
}
.fenye {
  width: 100%;
  height: 50px;
  text-align: center;
  margin-bottom: 50px;
  margin-top: 50px;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #64b6a8;
}
</style>
